<template>
  <!--租户收款账号管理 -->
  <div>
    <section>
      <el-form ref="form" :model="queryForm" label-width="82px" :inline="true" class="queryForm">
        <el-form-item label="账号名称:">
          <el-input v-model="queryForm.names" size="small" placeholder="请输入账号名称"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="but-container">
            <el-button type="primary" size="small" style="margin-right:5px" @click="
                getWarnTypeList(
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.names
                )
              ">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <div style="margin-top: -10px">
      <el-button type="primary" v-if="hasPermission('warn:warnUser:add')" size="small" @click="add">新增
      </el-button>
      <section class="right-but" style="display:flex">
        <el-button type="text" style="margin-right:-13px" @click="getWarnTypeList(page,orderBy.name,orderBy.method)">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
        </el-button>
        <PopoverBut :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </div>


    <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName"
      @sort-change="sortthiscolumn">
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="warnName" label="预警名称"></el-table-column>
      <el-table-column prop="warnType" label="预警类型" width="300px">
        <template slot-scope="scope">
          <section>
            <i></i>
             {{$dictUtils.getDictLabel("warnType", scope.row.warnType, "")}}
          </section>
        </template>
      </el-table-column>
      <el-table-column prop="preConf" label="条件设置"></el-table-column>
      <el-table-column prop="state" label="状态" width="100px" align="center">
        <template slot-scope="scope">
          <section class="activate-state" v-if="scope.row.state===1">
            <i></i>
             {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
          <section class="inactive-state" v-else>
            <i></i>
            {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
        </template>
      </el-table-column>

      <span v-for="(item, index) in checkedProps" :key="index">
        <el-table-column prop="createDate" :label="item" v-if="item==='创建时间'"></el-table-column>
        <el-table-column prop="createBy.loginName" :label="item" v-if="item==='创建人'"></el-table-column>
        <el-table-column prop="updateDate" :label="item" v-if="item==='上次操作时间'"></el-table-column>
        <el-table-column prop="updateBy.loginName" :label="item" v-if="item==='上次操作人'"></el-table-column>
      </span>

      <el-table-column prop="address" label="操作" width="252">
        <template slot-scope="scope">
          <template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary" v-if="item.value !=='-1'&&hasPermission('warn:warnUser:edit')&& item.value!==(scope.row.state+'')"
              :underline="false" @click="editState(item.value,scope.row)" :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state">{{item.label}}
            </el-link>
          </template>
          <el-link type="primary" :underline="false" @click="edit(scope.row)" v-if="hasPermission('warn:warnUser:edit')">修改
          </el-link>
          <el-link v-if="hasPermission('warn:warnUser:del')" type="primary" :underline="false" @click="del(scope.row.id,scope.row.state)">删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="page.pageSize"
      :current-page="page.pageNo" layout="total,prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <EditForm ref="EditForm" @refreshDataList="getWarnTypeList(page,orderBy.name,orderBy.method)"></EditForm>

  </div>
</template>
<script>
  import {
    getWarnTypeList,
    del,
    updateState
  } from '@/api/warn/WarnUser.js';
  import EditForm from './WarnSetEditForm'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  const cityOptions = ['上海', '北京']
  export default {
    components: {
      EditForm,
      PopoverBut
    },

    data() {
      return {
        msg: '',
        data: [],
        repeatIds: [],
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [{
            label: '上次操作人',
            key: 'updateBy.loginName'
          },
          {
            label: '上次操作时间',
            key: 'updateDate'
          },
          {
            label: '创建人',
            key: 'createBy.loginName'
          },
          {
            label: '创建时间',
            key: 'createDate'
          }
        ],
        tableData: [
          {
            tenant: {
              fullName: ''
            }
          }
        ],
        orderBy: {
          name: 'update_date',
          method: 'desc'
        },
        loading: false,
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        props: 1,
        queryForm: {
          checkedCities: 0,
          productName: '',
          productId: ''
        },
        checkedCities: [],
        cities: cityOptions
      }
    },
    methods: {
      // 获取列表带分页
      getWarnTypeList(params, orderName, orderByAORC, queryNames, queryState) {
        this.loading = true
        getWarnTypeList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          orderBy: orderName,
          orderByAORC: orderByAORC,
          names: queryNames,
          state: queryState
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
          this.loading = false
        })
      },
      // 删除
      del(ids, state) {
        if (state === 1) {
          this.$notify.error({
            title: '错误',
            message: '已启用，不支持删除！'
          });
        } else if (state === 0) {
          this.$notify.error({
            title: '错误',
            message: '已停用，不允许任何操作！'
          });
        } else if (state === -1) {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res) => {
            del({
              ids: ids
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '已删除!'
                })
                this.getWarnTypeList(this.page, this.orderBy.name, this.orderBy.method)
              }
            })
          });
        }
      },
      // 添加
      add() {
        this.$refs.EditForm.init('add')
      },
      // 改变状态
      editState(state, row) {
        this.$confirm('是否修改状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          updateState({
            id: row.id,
            state: state
          }).then(res => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '状态修改成功'
              })
              this.getWarnTypeList(this.page, this.orderBy.name, this.orderBy.method)
            }
          })
        })
      },
      // 编辑
      edit(row) {
        this.$refs.EditForm.init('edit', row)
      },
      // 是否显示某列数据
      handlerCloumn(e) {
        this.checkedProps = e
        // console.log(e)
      },
      // 重置查询条件
      reset() {
        this.queryForm = {}
      },
      // 排序
      sortthiscolumn(a) {
        console.log(a)
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.getWarnTypeList(this.page, this.orderBy.name, this.orderBy.method)
      },
      handleSizeChange() {},
      handleCurrentChange(e) {
        this.page.pageNo = e
        this.getWarnTypeList(this.page, this.orderBy.name, this.orderBy.method)
        console.log(e)
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }
    },
    mounted() {
      this.getWarnTypeList(this.page, this.orderBy.name, this.orderBy.method)
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 32px;
    width: 230px;
  }

  .queryForm {
    position: relative;

    .but-container {
      top: 10px;
      margin-left: 20px;
    }

    .el-form-item {
      margin-right: 30px;
    }
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }
</style>
